<template>
  <div class="p-20px">
    <el-card>
      <el-row type="flex" justify="end" class="mb-10px">
        <el-button type="success" size="default" :icon="Edit" @click="isShowDialog = true">
          {{ $t('manage.menu.add') }}
        </el-button>
      </el-row>

      <el-table :data="dataList" class="w-1/1 mb-20px" row-key="id" default-expand-all>
        <el-table-column prop="title" label="标题">
          <template #default="{row}">
            <div class="inline-flex items-center">
              <el-icon v-if="row.pid === null"><FolderOpened /></el-icon>
              <el-icon v-else-if="row.is_point"><View /></el-icon>
              <el-icon v-else><Document /></el-icon>
              <span class="ml-5px">{{ row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点标识" />
        <el-table-column label="操作" width="100">
          <template #default="{row}">
            <el-row type="flex" justify="end">
              <el-button type="primary" :icon="Edit" circle @click="openEdit(row.id)" />
              <el-button type="danger" :icon="Delete" circle @click="delMenu(row.id)" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Delete, FolderOpened, Document, View } from '@element-plus/icons-vue'
import { listMenus } from '@/api/menu'

const isShowDialog = ref(false)
const dataList = ref([])

async function getList() {
  const ret = await listMenus()
  formatTree(ret.data)
  dataList.value = ret.data
}

function formatTree(data) {
  data.forEach(it => {
    if (it.childs && it.childs.length) {
      it.children = it.childs
      delete it.childs
      formatTree(it.children)
    }

    if (it.points && it.points.length) {
      it.children = it.points
      delete it.points
      formatTree(it.children)
    }
  })
}

getList()

function openEdit() {
  ElMessage({ message: '时间关系, 暂时空着', type: 'warning' })
}

function delMenu() {
  ElMessage({ message: '时间关系, 暂时空着', type: 'warning' })
}
</script>
<style lang="scss" scoped></style>
